<template>
  <div class="app-container">


    <el-card class="books-card">
      <template #header>
        <div class="books-header">
          <span>书籍列表</span>
        </div>
      </template>
      <el-table :data="author.books" style="width: 100%" row-key="id">
        <el-table-column prop="bookname" label="书名" width="200" />
        <el-table-column label="标签" width="300">
          <template #default="scope">
            <el-tag v-for="tag in scope.row.tags" :key="tag.id" class="tag-item">
              {{ tag.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="章节" width="300">
          <template #default="scope">
            <el-tag v-for="part in scope.row.parts" :key="part.id" class="tag-item">
              {{ part.chapter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.book_state === 0 ? 'info' : 'success'">
              {{ scope.row.book_state === 0 ? '未完成' : '已完成' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="primary" size="small" @click="showEditBookDialog(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑作者对话框 -->
    <el-dialog v-model="editAuthorDialogVisible" title="编辑作者信息">
      <el-form :model="editAuthorForm">
        <el-form-item label="用户名">
          <el-input v-model="editAuthorForm.username"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editAuthorForm.userphone"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editAuthorDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateAuthor">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑书籍对话框 -->
    <el-dialog v-model="editBookDialogVisible" title="编辑书籍信息">
      <el-form :model="editBookForm">
        <el-form-item label="书名">
          <el-input v-model="editBookForm.bookname"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="editBookForm.tags" multiple placeholder="请选择">
            <el-option label="玄幻" value="玄幻"></el-option>
            <el-option label="科技" value="科技"></el-option>
            <el-option label="科幻" value="科幻"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="章节">
          <el-input v-model="editBookForm.parts" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editBookDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateBook">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref } from 'vue';

export default {
  setup() {
    const author = ref({
      id: 3,
      username: 'writer',
      password: '123',
      identity: 2,
      userphone: '15163577011',
      userstate: 0,
      books: [
        {
          id: 2,
          bookname: 'DaoTingLi的自述',
          author_id: 3,
          book_state: 0,
          tags: [
            { id: 1, type: '玄幻' },
            { id: 3, type: '科技' },
            { id: 4, type: '科幻' },
          ],
          parts: [
            { id: 2, bookid: 2, chapter: '小道于此' },
            { id: 3, bookid: 2, chapter: '风声起' },
          ],
        },
        {
          id: 3,
          bookname: 'DaoTingli语录',
          author_id: 3,
          book_state: 0,
          tags: [],
          parts: [
            { id: 4, bookid: 3, chapter: '经典语句' },
            { id: 5, bookid: 3, chapter: '长生天' },
          ],
        },
        {
          id: 4,
          bookname: '12134',
          author_id: 3,
          book_state: 0,
          tags: [
            { id: 1, type: '玄幻' },
          ],
          parts: [],
        },
      ],
    });

    const editAuthorDialogVisible = ref(false);
    const editBookDialogVisible = ref(false);

    const editAuthorForm = ref({
      username: '',
      userphone: '',
    });

    const editBookForm = ref({
      id: null,
      bookname: '',
      tags: [],
      parts: '',
    });

    const showEditAuthorDialog = () => {
      editAuthorDialogVisible.value = true;
      editAuthorForm.value.username = author.value.username;
      editAuthorForm.value.userphone = author.value.userphone;
    };

    const showEditBookDialog = (book) => {
      editBookDialogVisible.value = true;
      editBookForm.value.id = book.id;
      editBookForm.value.bookname = book.bookname;
      editBookForm.value.tags = book.tags.map(tag => tag.type);
      editBookForm.value.parts = book.parts.map(part => part.chapter).join(', ');
    };

    const updateAuthor = () => {
      author.value.username = editAuthorForm.value.username;
      author.value.userphone = editAuthorForm.value.userphone;
      editAuthorDialogVisible.value = false;
    };

    const updateBook = () => {
      const book = author.value.books.find(b => b.id === editBookForm.value.id);
      if (!book) return;
      
      book.bookname = editBookForm.value.bookname;
      book.tags = editBookForm.value.tags.map(tag => ({ 
        id: Date.now() + Math.random(), 
        type: tag 
      }));
      
      // 处理章节数据，过滤空值
      const chapters = editBookForm.value.parts
        .split(',')
        .map(chapter => chapter.trim())
        .filter(chapter => chapter.length > 0);
      
      book.parts = chapters.map(chapter => ({ 
        id: Date.now() + Math.random(), 
        bookid: book.id, 
        chapter: chapter 
      }));
      
      editBookDialogVisible.value = false;
    };

    return {
      author,
      editAuthorDialogVisible,
      editBookDialogVisible,
      editAuthorForm,
      editBookForm,
      showEditAuthorDialog,
      showEditBookDialog,
      updateAuthor,
      updateBook,
    };
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f9f9f9;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.author-card, .books-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 20px;
}

.author-header, .books-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.author-info p {
  margin: 8px 0;
  font-size: 16px;
  color: #333;
}

.tag-item {
  display: inline-block;
  margin: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  background-color: #e0e7ff;
  color: #5858fa;
  border: 1px solid #c0c4ff;
}

.el-table {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.el-table th, .el-table td {
  padding: 12px;
  text-align: center;
  font-size: 14px;
  color: #333;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.dialog-footer .el-button {
  margin-left: 10px;
}

.el-form-item {
  margin-bottom: 20px;
  width: 100%;
}

.el-form-item__content {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .author-header, .books-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .author-header .el-button {
    margin-top: 10px;
    width: 100%;
  }
  
  .tag-item {
    display: block;
    margin: 8px 0;
  }
}
</style>